<!DOCTYPE html>
<html>
<head>
    

    

    



    <meta charset="utf-8">
    
    
    
    
    <title>CSS3的学习 | SongKaBaKa</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="">
    <meta name="description" content="定位positioningpositionstatic静态定位，正常文档流，默认值，上到下，左到右 relative相对定位，元素的位置还在文档中，相对于自己的左上角进行偏移，我人走了，位置得给我留着，谁也不能动，这就叫相对 absolute绝对定位，脱离文档流，相对于包含他的容器进行定位，而且原来在文档中的位置会被后来元素占用 父级元素涉及position(非static属性) transfor">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS3的学习">
<meta property="og:url" content="https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/index.html">
<meta property="og:site_name" content="SongKaBaKa">
<meta property="og:description" content="定位positioningpositionstatic静态定位，正常文档流，默认值，上到下，左到右 relative相对定位，元素的位置还在文档中，相对于自己的左上角进行偏移，我人走了，位置得给我留着，谁也不能动，这就叫相对 absolute绝对定位，脱离文档流，相对于包含他的容器进行定位，而且原来在文档中的位置会被后来元素占用 父级元素涉及position(非static属性) transfor">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-09-23T13:08:52.496Z">
<meta property="article:modified_time" content="2020-09-26T08:33:50.475Z">
<meta property="article:author" content="Song Wani">
<meta name="twitter:card" content="summary">
    
    <link rel="shortcut icon" href="/blog/favicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>

    <!-- custom head -->
    

<meta name="generator" content="Hexo 4.2.1"></head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/blog/img/brand.jpg)">
      <div class="brand">
        <a href="/blog/" class="avatar waves-effect waves-circle waves-light">
          <img src="/blog/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">Song Wani</h5>
          <a href="mailto:bugsong@wo.cn" title="bugsong@wo.cn" class="mail">bugsong@wo.cn</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/blog/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                Archives
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                Tags
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/categories"  >
                <i class="icon icon-lg icon-th-list"></i>
                Categories
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://songbug.gitee.io/blog" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">CSS3的学习</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="Search">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">CSS3的学习</h1>
        <h5 class="subtitle">
            
                <time datetime="2020-09-23T13:08:52.496Z" itemprop="datePublished" class="page-time">
  2020-09-23
</time>


            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap post-toc-shrink" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#定位positioning"><span class="post-toc-number">1.</span> <span class="post-toc-text">定位positioning</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#position"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">position</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#static"><span class="post-toc-number">1.1.1.</span> <span class="post-toc-text">static</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#relative"><span class="post-toc-number">1.1.2.</span> <span class="post-toc-text">relative</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#absolute"><span class="post-toc-number">1.1.3.</span> <span class="post-toc-text">absolute</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#fixed"><span class="post-toc-number">1.1.4.</span> <span class="post-toc-text">fixed</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#sticky"><span class="post-toc-number">1.1.5.</span> <span class="post-toc-text">sticky</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#z-index"><span class="post-toc-number">1.2.</span> <span class="post-toc-text">z-index</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#布局layout"><span class="post-toc-number">2.</span> <span class="post-toc-text">布局layout</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#display"><span class="post-toc-number">2.1.</span> <span class="post-toc-text">display</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#block"><span class="post-toc-number">2.1.1.</span> <span class="post-toc-text">block</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#inline"><span class="post-toc-number">2.1.2.</span> <span class="post-toc-text">inline</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#flex"><span class="post-toc-number">2.1.3.</span> <span class="post-toc-text">flex</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#grid"><span class="post-toc-number">2.1.4.</span> <span class="post-toc-text">grid</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#inline-block"><span class="post-toc-number">2.1.5.</span> <span class="post-toc-text">inline-block</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#边距塌陷"><span class="post-toc-number">2.1.6.</span> <span class="post-toc-text">边距塌陷</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#float"><span class="post-toc-number">2.2.</span> <span class="post-toc-text">float</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#clear"><span class="post-toc-number">2.3.</span> <span class="post-toc-text">clear</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#visibility"><span class="post-toc-number">2.4.</span> <span class="post-toc-text">visibility</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#overflow，溢出"><span class="post-toc-number">2.5.</span> <span class="post-toc-text">overflow，溢出</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#visible"><span class="post-toc-number">2.5.1.</span> <span class="post-toc-text">visible</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#hidden"><span class="post-toc-number">2.5.2.</span> <span class="post-toc-text">hidden</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#scroll"><span class="post-toc-number">2.5.3.</span> <span class="post-toc-text">scroll</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#auto"><span class="post-toc-number">2.5.4.</span> <span class="post-toc-text">auto</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#clip"><span class="post-toc-number">2.5.5.</span> <span class="post-toc-text">clip</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#尺寸与补白Dimension"><span class="post-toc-number">3.</span> <span class="post-toc-text">尺寸与补白Dimension</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#width"><span class="post-toc-number">3.0.1.</span> <span class="post-toc-text">width</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#min-width"><span class="post-toc-number">3.0.2.</span> <span class="post-toc-text">min-width</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#max-width"><span class="post-toc-number">3.0.3.</span> <span class="post-toc-text">max-width</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#margin"><span class="post-toc-number">3.0.4.</span> <span class="post-toc-text">margin</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#padding"><span class="post-toc-number">3.0.5.</span> <span class="post-toc-text">padding</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#背景与边框Backgrounds-and-Borders"><span class="post-toc-number">4.</span> <span class="post-toc-text">背景与边框Backgrounds and Borders</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#border"><span class="post-toc-number">4.1.</span> <span class="post-toc-text">border</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#border-width"><span class="post-toc-number">4.1.1.</span> <span class="post-toc-text">border-width</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#border-style-border-color-请参考border-width"><span class="post-toc-number">4.1.2.</span> <span class="post-toc-text">border-style,border-color 请参考border-width</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#box-shadow"><span class="post-toc-number">4.2.</span> <span class="post-toc-text">box-shadow</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#border-radius"><span class="post-toc-number">4.3.</span> <span class="post-toc-text">border-radius</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#border-image"><span class="post-toc-number">4.4.</span> <span class="post-toc-text">border-image</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background，不熟练不建议集成写法"><span class="post-toc-number">4.5.</span> <span class="post-toc-text">background，不熟练不建议集成写法</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-color"><span class="post-toc-number">4.6.</span> <span class="post-toc-text">background-color</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-image"><span class="post-toc-number">4.7.</span> <span class="post-toc-text">background-image</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-repeat"><span class="post-toc-number">4.8.</span> <span class="post-toc-text">background-repeat</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-attachment，附件，依恋，附着"><span class="post-toc-number">4.9.</span> <span class="post-toc-text">background-attachment，附件，依恋，附着</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#fixed-1"><span class="post-toc-number">4.9.1.</span> <span class="post-toc-text">fixed</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#scroll-1"><span class="post-toc-number">4.9.2.</span> <span class="post-toc-text">scroll</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#local"><span class="post-toc-number">4.9.3.</span> <span class="post-toc-text">local</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-position"><span class="post-toc-number">4.10.</span> <span class="post-toc-text">background-position</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-origin-起源，开端"><span class="post-toc-number">4.11.</span> <span class="post-toc-text">background-origin 起源，开端</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-clip-修剪"><span class="post-toc-number">4.12.</span> <span class="post-toc-text">background-clip 修剪</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#text，类似遮罩效果，透过文字显示背景"><span class="post-toc-number">4.12.1.</span> <span class="post-toc-text">text，类似遮罩效果，透过文字显示背景</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-size"><span class="post-toc-number">4.13.</span> <span class="post-toc-text">background-size</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#颜色color"><span class="post-toc-number">5.</span> <span class="post-toc-text">颜色color</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#color"><span class="post-toc-number">5.1.</span> <span class="post-toc-text">color</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#opacity"><span class="post-toc-number">5.2.</span> <span class="post-toc-text">opacity</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#字体font"><span class="post-toc-number">6.</span> <span class="post-toc-text">字体font</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#font：字体样式-大小写-粗细-拉伸-尺寸-行高-字体序列；"><span class="post-toc-number">6.1.</span> <span class="post-toc-text">font：字体样式 大小写 粗细 拉伸 尺寸 行高 字体序列；</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#font-style"><span class="post-toc-number">6.2.</span> <span class="post-toc-text">font-style</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#normal"><span class="post-toc-number">6.2.1.</span> <span class="post-toc-text">normal</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#italic"><span class="post-toc-number">6.2.2.</span> <span class="post-toc-text">italic</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#oblique，人为倾斜字体？"><span class="post-toc-number">6.2.3.</span> <span class="post-toc-text">oblique，人为倾斜字体？</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#font-variant-字母"><span class="post-toc-number">6.3.</span> <span class="post-toc-text">font-variant 字母</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#normal-1"><span class="post-toc-number">6.3.1.</span> <span class="post-toc-text">normal</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#small-caps"><span class="post-toc-number">6.3.2.</span> <span class="post-toc-text">small-caps</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#font-weight-粗细"><span class="post-toc-number">6.4.</span> <span class="post-toc-text">font-weight 粗细</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#normal、bold、bolder、lighter"><span class="post-toc-number">6.4.1.</span> <span class="post-toc-text">normal、bold、bolder、lighter</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#font-size-大小"><span class="post-toc-number">6.5.</span> <span class="post-toc-text">font-size 大小</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#font-family-字体"><span class="post-toc-number">6.6.</span> <span class="post-toc-text">font-family 字体</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#文本Text"><span class="post-toc-number">7.</span> <span class="post-toc-text">文本Text</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#text-transform"><span class="post-toc-number">7.1.</span> <span class="post-toc-text">text-transform</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#none-不做转换"><span class="post-toc-number">7.1.1.</span> <span class="post-toc-text">none 不做转换</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#capitalize，首字母大写"><span class="post-toc-number">7.1.2.</span> <span class="post-toc-text">capitalize，首字母大写</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#uppercase-全单词大写"><span class="post-toc-number">7.1.3.</span> <span class="post-toc-text">uppercase 全单词大写</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#lowercase-全单词小写"><span class="post-toc-number">7.1.4.</span> <span class="post-toc-text">lowercase 全单词小写</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#white-space-白字符处理"><span class="post-toc-number">7.2.</span> <span class="post-toc-text">white-space 白字符处理</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#normal-默认处理，空白格多合一"><span class="post-toc-number">7.2.1.</span> <span class="post-toc-text">normal 默认处理，空白格多合一</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#pre-保留原格式，越界也不做处理"><span class="post-toc-number">7.2.2.</span> <span class="post-toc-text">pre 保留原格式，越界也不做处理</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#nowrap-强制同一行显示"><span class="post-toc-number">7.2.3.</span> <span class="post-toc-text">nowrap 强制同一行显示</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#pre-wrap-越界自动换行"><span class="post-toc-number">7.2.4.</span> <span class="post-toc-text">pre-wrap 越界自动换行</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#pre-line-保留输入时的换行"><span class="post-toc-number">7.2.5.</span> <span class="post-toc-text">pre-line 保留输入时的换行</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#word-wrap"><span class="post-toc-number">7.3.</span> <span class="post-toc-text">word-wrap</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#normal-允许内容溢出容器边界"><span class="post-toc-number">7.3.1.</span> <span class="post-toc-text">normal 允许内容溢出容器边界</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#break-word-需要断行就断行，尽量保持单词完整。"><span class="post-toc-number">7.3.2.</span> <span class="post-toc-text">break-word 需要断行就断行，尽量保持单词完整。</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#text-align"><span class="post-toc-number">7.4.</span> <span class="post-toc-text">text-align</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#justify，两端对齐"><span class="post-toc-number">7.4.1.</span> <span class="post-toc-text">justify，两端对齐</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#start，end-内容开始和结束边界"><span class="post-toc-number">7.4.2.</span> <span class="post-toc-text">start，end 内容开始和结束边界</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#word-spacing，单词间隔，像素，百分比"><span class="post-toc-number">7.5.</span> <span class="post-toc-text">word-spacing，单词间隔，像素，百分比</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#letter-spacing，字符间隔，像素"><span class="post-toc-number">7.6.</span> <span class="post-toc-text">letter-spacing，字符间隔，像素</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#text-indent，缩进"><span class="post-toc-number">7.7.</span> <span class="post-toc-text">text-indent，缩进</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#vertical-align-垂直对齐"><span class="post-toc-number">7.8.</span> <span class="post-toc-text">vertical-align 垂直对齐</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#baseline"><span class="post-toc-number">7.8.1.</span> <span class="post-toc-text">baseline</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#text-top，text-bottom"><span class="post-toc-number">7.8.2.</span> <span class="post-toc-text">text-top，text-bottom</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#middle-把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐"><span class="post-toc-number">7.8.3.</span> <span class="post-toc-text">middle 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#top，bottom-将当前盒子与行盒子的t-b对齐"><span class="post-toc-number">7.8.4.</span> <span class="post-toc-text">top，bottom 将当前盒子与行盒子的t&#x2F;b对齐</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#百分比（0-baseline），像素-0px-baseline"><span class="post-toc-number">7.8.5.</span> <span class="post-toc-text">百分比（0%&#x3D;baseline），像素(0px&#x3D;baseline)</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#line-height"><span class="post-toc-number">7.9.</span> <span class="post-toc-text">line-height</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#文本装饰-text-decoration"><span class="post-toc-number">8.</span> <span class="post-toc-text">文本装饰 text decoration</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#text-decoration：上线下线中线-实现虚线波浪线-线的颜色；"><span class="post-toc-number">8.1.</span> <span class="post-toc-text">text-decoration：上线下线中线    实现虚线波浪线    线的颜色；</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#text-decoration-line"><span class="post-toc-number">8.2.</span> <span class="post-toc-text">text-decoration-line</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#none，underline，overline，line-through，blink？？"><span class="post-toc-number">8.2.1.</span> <span class="post-toc-text">none，underline，overline，line-through，blink？？</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#text-decoration-color-线的颜色"><span class="post-toc-number">8.3.</span> <span class="post-toc-text">text-decoration-color 线的颜色</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#text-decoration-style：solid实线、double双线、dotted点线、dashed虚线、wavy波浪线"><span class="post-toc-number">8.4.</span> <span class="post-toc-text">text-decoration-style：solid实线、double双线、dotted点线、dashed虚线、wavy波浪线</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#text-shadow"><span class="post-toc-number">8.5.</span> <span class="post-toc-text">text-shadow</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#书写模式Writing-Modes"><span class="post-toc-number">9.</span> <span class="post-toc-text">书写模式Writing Modes</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#direction-设置文本流的方向"><span class="post-toc-number">9.1.</span> <span class="post-toc-text">direction 设置文本流的方向</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#ltr，rtl-左到右，右到左"><span class="post-toc-number">9.1.1.</span> <span class="post-toc-text">ltr，rtl 左到右，右到左</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#writing-mode"><span class="post-toc-number">9.2.</span> <span class="post-toc-text">writing-mode</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#horizontal-tb-水平方向从顶到底写"><span class="post-toc-number">9.2.1.</span> <span class="post-toc-text">horizontal-tb 水平方向从顶到底写</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#vertical-rl-垂直方向从右到左"><span class="post-toc-number">9.2.2.</span> <span class="post-toc-text">vertical-rl 垂直方向从右到左</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#vertical-rl-垂直方向从右到左-1"><span class="post-toc-number">9.2.3.</span> <span class="post-toc-text">vertical-rl 垂直方向从右到左</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#列表List"><span class="post-toc-number">10.</span> <span class="post-toc-text">列表List</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#list-style：type-position-image；"><span class="post-toc-number">10.1.</span> <span class="post-toc-text">list-style：type  position  image；</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#list-style-image：url"><span class="post-toc-number">10.2.</span> <span class="post-toc-text">list-style-image：url();</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#list-style-position"><span class="post-toc-number">10.3.</span> <span class="post-toc-text">list-style-position</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#outside-列表项目标记放置在文本以外，且环绕文本不根据标记对齐"><span class="post-toc-number">10.3.1.</span> <span class="post-toc-text">outside 列表项目标记放置在文本以外，且环绕文本不根据标记对齐</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#inside-列表项目标记放置在文本以内，且环绕文本根据标记对齐"><span class="post-toc-number">10.3.2.</span> <span class="post-toc-text">inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#list-style-type"><span class="post-toc-number">10.4.</span> <span class="post-toc-text">list-style-type</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#disc-实心圆"><span class="post-toc-number">10.4.1.</span> <span class="post-toc-text">disc 实心圆</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#circle-空心圆"><span class="post-toc-number">10.4.2.</span> <span class="post-toc-text">circle 空心圆</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#square-实心方块"><span class="post-toc-number">10.4.3.</span> <span class="post-toc-text">square 实心方块</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#decimal-阿拉伯数字"><span class="post-toc-number">10.4.4.</span> <span class="post-toc-text">decimal 阿拉伯数字</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#表格table"><span class="post-toc-number">11.</span> <span class="post-toc-text">表格table</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#border-collapse"><span class="post-toc-number">11.1.</span> <span class="post-toc-text">border-collapse</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#separate：边框独立（分开）"><span class="post-toc-number">11.1.1.</span> <span class="post-toc-text">separate：边框独立（分开）</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#collapse：边框合并（折叠）"><span class="post-toc-number">11.1.2.</span> <span class="post-toc-text">collapse：边框合并（折叠）</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#border-spacing：横向-纵向；单位px"><span class="post-toc-number">11.2.</span> <span class="post-toc-text">border-spacing：横向 纵向；单位px</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#empty-cells"><span class="post-toc-number">11.3.</span> <span class="post-toc-text">empty-cells</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#hide：当内容为空时隐藏单元格框线"><span class="post-toc-number">11.3.1.</span> <span class="post-toc-text">hide：当内容为空时隐藏单元格框线</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#跳过了内容和用户界面"><span class="post-toc-number">12.</span> <span class="post-toc-text">跳过了内容和用户界面</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#多列multi-column，应该就是和并列什么的"><span class="post-toc-number">13.</span> <span class="post-toc-text">多列multi-column，应该就是和并列什么的</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#columns：列宽px-列数；"><span class="post-toc-number">13.1.</span> <span class="post-toc-text">columns：列宽px 列数；</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#column-width，column-count，定义列宽列数"><span class="post-toc-number">13.2.</span> <span class="post-toc-text">column-width，column-count，定义列宽列数</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#column-gap-列与列的间隔，默认同font-size"><span class="post-toc-number">13.3.</span> <span class="post-toc-text">column-gap 列与列的间隔，默认同font-size</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#column-rule：厚度-样式-颜色；"><span class="post-toc-number">13.4.</span> <span class="post-toc-text">column-rule：厚度 样式 颜色；</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#column-rule-width，style，color"><span class="post-toc-number">13.5.</span> <span class="post-toc-text">column-rule-width，style，color</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#column-span-none，all"><span class="post-toc-number">13.6.</span> <span class="post-toc-text">column-span none，all</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#column-fill-auto，balance"><span class="post-toc-number">13.7.</span> <span class="post-toc-text">column-fill auto，balance</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#伸缩盒（Flexible-Box）"><span class="post-toc-number">14.</span> <span class="post-toc-text">伸缩盒（Flexible Box）</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#flex：grow-shrink-basis；"><span class="post-toc-number">14.1.</span> <span class="post-toc-text">flex：grow shrink basis；</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#grow"><span class="post-toc-number">14.1.1.</span> <span class="post-toc-text">grow</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#flex-shrink-收缩"><span class="post-toc-number">14.2.</span> <span class="post-toc-text">flex-shrink 收缩</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#flex-basis"><span class="post-toc-number">14.3.</span> <span class="post-toc-text">flex-basis</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#length：用长度值来定义宽度。不允许负值"><span class="post-toc-number">14.3.1.</span> <span class="post-toc-text">length：用长度值来定义宽度。不允许负值</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#percentage：用百分比来定义宽度。不允许负值"><span class="post-toc-number">14.3.2.</span> <span class="post-toc-text">percentage：用百分比来定义宽度。不允许负值</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#auto：无特定宽度值，取决于其它属性值"><span class="post-toc-number">14.3.3.</span> <span class="post-toc-text">auto：无特定宽度值，取决于其它属性值</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#content：基于内容自动计算宽度"><span class="post-toc-number">14.3.4.</span> <span class="post-toc-text">content：基于内容自动计算宽度</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#flex-flow：direction-wrap；"><span class="post-toc-number">14.4.</span> <span class="post-toc-text">flex-flow：direction wrap；</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#align-content"><span class="post-toc-number">14.5.</span> <span class="post-toc-text">align-content</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#align-items"><span class="post-toc-number">14.6.</span> <span class="post-toc-text">align-items</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#align-self"><span class="post-toc-number">14.7.</span> <span class="post-toc-text">align-self</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#justify-content"><span class="post-toc-number">14.8.</span> <span class="post-toc-text">justify-content</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Transform-2D转换"><span class="post-toc-number">15.</span> <span class="post-toc-text">Transform 2D转换</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#translate"><span class="post-toc-number">15.1.</span> <span class="post-toc-text">translate</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#rotate"><span class="post-toc-number">15.2.</span> <span class="post-toc-text">rotate</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#scale"><span class="post-toc-number">15.3.</span> <span class="post-toc-text">scale</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#skew-倾斜"><span class="post-toc-number">15.4.</span> <span class="post-toc-text">skew 倾斜</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#matrix-矩阵"><span class="post-toc-number">15.5.</span> <span class="post-toc-text">matrix 矩阵</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Transform-3D转换"><span class="post-toc-number">16.</span> <span class="post-toc-text">Transform 3D转换</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#rotateX"><span class="post-toc-number">16.1.</span> <span class="post-toc-text">rotateX</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#rotateY"><span class="post-toc-number">16.2.</span> <span class="post-toc-text">rotateY</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#CSS3过度"><span class="post-toc-number">17.</span> <span class="post-toc-text">CSS3过度</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#单项改变"><span class="post-toc-number">17.1.</span> <span class="post-toc-text">单项改变</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#多项改变"><span class="post-toc-number">17.2.</span> <span class="post-toc-text">多项改变</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#transition-delay-触发等待时间"><span class="post-toc-number">17.3.</span> <span class="post-toc-text">transition-delay 触发等待时间</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#动画章节-animation"><span class="post-toc-number">18.</span> <span class="post-toc-text">动画章节 animation</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#animation：属性复合写法，也可以拆开写，单独设置"><span class="post-toc-number">18.1.</span> <span class="post-toc-text">animation：属性复合写法，也可以拆开写，单独设置</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#animation-name：检索或设置对象所应用的动画名称"><span class="post-toc-number">18.1.1.</span> <span class="post-toc-text">animation-name：检索或设置对象所应用的动画名称</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#animation-duration：检索或设置对象动画的持续时间"><span class="post-toc-number">18.1.2.</span> <span class="post-toc-text">animation-duration：检索或设置对象动画的持续时间</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#animation-timing-function：检索或设置对象动画的过渡类型"><span class="post-toc-number">18.1.3.</span> <span class="post-toc-text">animation-timing-function：检索或设置对象动画的过渡类型</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#属性有："><span class="post-toc-number">18.1.3.1.</span> <span class="post-toc-text">属性有：</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#animation-delay：检索或设置对象动画延迟的时间"><span class="post-toc-number">18.1.4.</span> <span class="post-toc-text">animation-delay：检索或设置对象动画延迟的时间</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#animation-iteration-count：检索或设置对象动画的循环次数"><span class="post-toc-number">18.1.5.</span> <span class="post-toc-text">animation-iteration-count：检索或设置对象动画的循环次数</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#属性有：-1"><span class="post-toc-number">18.1.5.1.</span> <span class="post-toc-text">属性有：</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#animation-direction：检索或设置对象动画在循环中是否反向运动"><span class="post-toc-number">18.1.6.</span> <span class="post-toc-text">animation-direction：检索或设置对象动画在循环中是否反向运动</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#属性有：-2"><span class="post-toc-number">18.1.6.1.</span> <span class="post-toc-text">属性有：</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#animation-fill-mode：检索或设置对象动画时间之外的状态"><span class="post-toc-number">18.1.7.</span> <span class="post-toc-text">animation-fill-mode：检索或设置对象动画时间之外的状态</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#状态属性，不写在综合里：animation-play-state：running、paused"><span class="post-toc-number">18.1.8.</span> <span class="post-toc-text">状态属性，不写在综合里：animation-play-state：running、paused</span></a></li></ol></li></ol></li></ol>
        </nav>
    </aside>


<article id="post-CSS3的学习"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">CSS3的学习</h1>
        <div class="post-meta">
            <time class="post-time" title="2020-09-23 21:08:52" datetime="2020-09-23T13:08:52.496Z"  itemprop="datePublished">2020-09-23</time>

            


            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <h2 id="定位positioning"><a href="#定位positioning" class="headerlink" title="定位positioning"></a>定位positioning</h2><h3 id="position"><a href="#position" class="headerlink" title="position"></a>position</h3><h4 id="static"><a href="#static" class="headerlink" title="static"></a>static</h4><p>静态定位，正常文档流，默认值，上到下，左到右</p>
<h4 id="relative"><a href="#relative" class="headerlink" title="relative"></a>relative</h4><p>相对定位，元素的位置还在文档中，相对于自己的左上角进行偏移，我人走了，位置得给我留着，谁也不能动，这就叫相对</p>
<h4 id="absolute"><a href="#absolute" class="headerlink" title="absolute"></a>absolute</h4><p>绝对定位，脱离文档流，相对于包含他的容器进行定位，而且原来在文档中的位置会被后来元素占用</p>
<p>父级元素涉及position(非static属性) transform perspective属性的话根据父级元素调整自己的定位，否则是body</p>
<h4 id="fixed"><a href="#fixed" class="headerlink" title="fixed"></a>fixed</h4><p>包含元素是浏览器窗口，常用来设置浮动广告条</p>
<h4 id="sticky"><a href="#sticky" class="headerlink" title="sticky"></a>sticky</h4><p>巴拉巴拉，固定的导航栏用这个</p>
<h3 id="z-index"><a href="#z-index" class="headerlink" title="z-index"></a>z-index</h3><p>理解为photoshop的图层，也可以嵌套个父亲进行定位，此时取决于父级元素z-index设置</p>
<p><strong>接下来是案例展示</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>position<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">			body &#123;</span><br><span class="line">				margin: 0;</span><br><span class="line">				padding: 0;</span><br><span class="line">				font-size: 18;</span><br><span class="line">				font-weight: bold;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-class">.children1</span>,</span></span><br><span class="line"><span class="css">			<span class="selector-class">.children2</span>,</span></span><br><span class="line"><span class="css">			<span class="selector-class">.children3</span> &#123;</span></span><br><span class="line">				width: 100px;</span><br><span class="line">				height: 100px;</span><br><span class="line">				border: black solid 10px;</span><br><span class="line">				text-align: center;</span><br><span class="line">				line-height: 100px;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-class">.children1</span> &#123;</span></span><br><span class="line">				background-color: aqua;</span><br><span class="line">				position: static;</span><br><span class="line"><span class="css">				<span class="comment">/* left: 100px;对静态无效 */</span></span></span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-class">.children2</span> &#123;</span></span><br><span class="line">				background-color: chartreuse;</span><br><span class="line">				position: relative;</span><br><span class="line"><span class="css">				<span class="comment">/* 以下属性是相对自己原位置,以自己的边框外线为准 */</span></span></span><br><span class="line">				left: 150px;</span><br><span class="line">				top: 100px;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-class">.children3</span> &#123;</span></span><br><span class="line">				background-color: darkviolet;</span><br><span class="line">				position: absolute;</span><br><span class="line"><span class="css">				<span class="comment">/* 如果不给方位属性，它就会在正常文档流中的位置杵着，而不是0px；不然则从父级边框内线起算 */</span></span></span><br><span class="line">				top: 300px;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-class">.chirdren4</span> &#123;</span></span><br><span class="line">				position: fixed;</span><br><span class="line">				background-color: gold;</span><br><span class="line">				width: 80px;</span><br><span class="line">				height: 30px;</span><br><span class="line"><span class="css">				<span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 5<span class="selector-tag">px</span>;</span></span><br><span class="line">				right: 0px;</span><br><span class="line">				top: 250px;</span><br><span class="line">				text-align: center;</span><br><span class="line">				line-height: 30px;</span><br><span class="line"><span class="css">				<span class="comment">/* 脱离文档流，就固定在那里，大概就是网页里的浮动广告 */</span></span></span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-class">.father</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="selector-tag">background-color</span>: <span class="selector-id">#A52A2A</span>;</span></span><br><span class="line">				position: relative;</span><br><span class="line"><span class="css">				<span class="selector-tag">border</span>: <span class="selector-id">#7FFF00</span> <span class="selector-tag">solid</span> 10<span class="selector-tag">px</span>;</span></span><br><span class="line">				padding: 100px;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-class">.nav1</span> &#123;</span></span><br><span class="line">				position: sticky;</span><br><span class="line"><span class="css">				<span class="comment">/* 会占用正常文档流中的位置 */</span></span></span><br><span class="line"><span class="css">				<span class="comment">/* 以下设置是为了突出显示效果 */</span></span></span><br><span class="line">				width: 60%;</span><br><span class="line">				height: 40px;</span><br><span class="line">				top: 50px;</span><br><span class="line"><span class="css">				<span class="selector-tag">background-color</span>: <span class="selector-id">#00FFFF</span>;</span></span><br><span class="line"><span class="css">				<span class="selector-tag">border</span>: 5<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#9400D3</span>;</span></span><br><span class="line">				z-index: 999;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-class">.nav2</span> &#123;</span></span><br><span class="line">				position: sticky;</span><br><span class="line"><span class="css">				<span class="comment">/* 以下设置是为了突出显示效果 */</span></span></span><br><span class="line">				width: 60%;</span><br><span class="line">				height: 40px;</span><br><span class="line">				top: 100px;</span><br><span class="line"><span class="css">				<span class="selector-tag">background-color</span>: <span class="selector-id">#00FFFF</span>;</span></span><br><span class="line"><span class="css">				<span class="selector-tag">border</span>: 5<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#9400D3</span>;</span></span><br><span class="line">				z-index: 999;</span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"nav1"</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>1<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>1<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>1<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"nav2"</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"father"</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"children1"</span>&gt;</span>静态定位<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"children2"</span>&gt;</span>相对定位<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"children3"</span>&gt;</span>绝对定位<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"chirdren4"</span>&gt;</span>固定定位<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="布局layout"><a href="#布局layout" class="headerlink" title="布局layout"></a>布局layout</h2><p><strong>块级元素和内联元素</strong></p>
<p><strong>block元素：</strong></p>
<ul>
<li>block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度</li>
<li>block元素可以设置width和height属性。块级元素即使设置了宽度,仍然是独占一行</li>
<li>block元素也可以设置margin和padding属性</li>
</ul>
<p><strong>inline元素：</strong></p>
<ul>
<li>inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行</li>
<li>inline元素的宽度是自身内容的宽度(默认有多少占多少)</li>
<li>inline元素设置width和height属性无效</li>
<li>inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。</li>
</ul>
<p><strong>inline-block元素：</strong></p>
<p>简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）设置inline-block属性，使其既具有block的可设置宽度和高度特性又具有inline的同行特性</p>
<h3 id="display"><a href="#display" class="headerlink" title="display"></a>display</h3><p>盒子的布局方式，可以分为两种类型</p>
<h4 id="block"><a href="#block" class="headerlink" title="block"></a>block</h4><p>外部显示类型，</p>
<p>块级盒子，有div p h1等，宽度占满，</p>
<h4 id="inline"><a href="#inline" class="headerlink" title="inline"></a>inline</h4><p>行内盒子，span a 无法手动设置宽和高，垂直方向上的padding，magin虽然可以设置生效，但不会挤占其他盒子的空间，会导致重叠，水平则会挤占</p>
<p>块级盒子，则会生效和挤占空间</p>
<h4 id="flex"><a href="#flex" class="headerlink" title="flex"></a>flex</h4><p>内部显示类型则是控制盒子内盒子的显示类型，正常文档流，行内盒子内部只能有行内盒子的元素</p>
<p>流式布局</p>
<h4 id="grid"><a href="#grid" class="headerlink" title="grid"></a>grid</h4><p>栅格式布局，类似瀑布流，竖着的东西</p>
<h4 id="inline-block"><a href="#inline-block" class="headerlink" title="inline-block"></a>inline-block</h4><p>外部保持行内状态，又可同时设置宽高。</p>
<h4 id="边距塌陷"><a href="#边距塌陷" class="headerlink" title="边距塌陷"></a>边距塌陷</h4><p>当块级元素（block）的<strong>上外边距</strong>和<strong>下外边距</strong>同时都有设定时只会只会保留最大边距，这种行为称为<strong>边界折叠</strong>（margin collapsing），有时也翻译为<strong>外边距重叠</strong>。、</p>
<p>设定float和position=absolute（包括固定定位fixed，但是relative不可以）的元素不会产生外边距重叠行为（也就是父子元素都是标准流的时候会发生外边距塌陷的问题）</p>
<p>只要父元素和子元素任何一个元素设置了浮动或者绝对定位就不会发生外边距塌陷的问题</p>
<p><em>相邻盒子或父子盒子，都是正数取最大，相同取其一；</em></p>
<p><em>正负都有，取最大正数与最小负数之和</em></p>
<p><em>都是负数取最小</em></p>
<h3 id="float"><a href="#float" class="headerlink" title="float"></a>float</h3><p>这里讲到了如何让列表横着排列，看来不是利用修改display：inline-block；</p>
<p>同级元素统一浮动，并更改显示方式去掉换行</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">ul</span><br><span class="line">&#123;</span><br><span class="line"><span class="css"><span class="selector-tag">float</span><span class="selector-pseudo">:left</span>;</span></span><br><span class="line"><span class="css"><span class="selector-tag">width</span><span class="selector-pseudo">:100</span>%;</span></span><br><span class="line"><span class="css"><span class="selector-tag">padding</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line"><span class="css"><span class="selector-tag">margin</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line"><span class="css"><span class="selector-tag">list-style-type</span><span class="selector-pseudo">:none</span>;</span></span><br><span class="line">&#125;</span><br><span class="line">a</span><br><span class="line">&#123;</span><br><span class="line"><span class="css"><span class="selector-tag">float</span><span class="selector-pseudo">:left</span>;</span></span><br><span class="line"><span class="css"><span class="selector-tag">width</span><span class="selector-pseudo">:7em</span>;</span></span><br><span class="line"><span class="css"><span class="selector-tag">text-decoration</span><span class="selector-pseudo">:none</span>;</span></span><br><span class="line"><span class="css"><span class="selector-tag">color</span><span class="selector-pseudo">:white</span>;</span></span><br><span class="line"><span class="css"><span class="selector-tag">background-color</span><span class="selector-pseudo">:purple</span>;</span></span><br><span class="line"><span class="css"><span class="selector-tag">padding</span><span class="selector-pseudo">:0.2em</span> 0<span class="selector-class">.6em</span>;</span></span><br><span class="line"><span class="css"><span class="selector-tag">border-right</span><span class="selector-pseudo">:1px</span> <span class="selector-tag">solid</span> <span class="selector-tag">white</span>;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="css"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;<span class="attribute">background-color</span>:<span class="number">#ff3300</span>&#125;</span></span><br><span class="line"><span class="css"><span class="selector-tag">li</span> &#123;<span class="attribute">display</span>:inline&#125;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>Link one<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>Link two<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>Link three<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>Link four<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。</span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>浮动会脱离文档流，同级浮动在同一层，一行排不开也会换行显示。如果高度不同，也可能会被第二近的浮动元素卡到，从而贴不到容器的边</p>
<h3 id="clear"><a href="#clear" class="headerlink" title="clear"></a>clear</h3><p>清除浮动，写哪边就是哪边不允许浮动，写both就是都不允许</p>
<h3 id="visibility"><a href="#visibility" class="headerlink" title="visibility"></a>visibility</h3><p>hidden，visible，隐藏和可见</p>
<h3 id="overflow，溢出"><a href="#overflow，溢出" class="headerlink" title="overflow，溢出"></a>overflow，溢出</h3><p>针对容器内的东西进行限制</p>
<h4 id="visible"><a href="#visible" class="headerlink" title="visible"></a>visible</h4><p>默认，就是溢出就溢出，也给显示出来，可以看到</p>
<h4 id="hidden"><a href="#hidden" class="headerlink" title="hidden"></a>hidden</h4><p>隐藏溢出内容，而且不出现滚动条</p>
<h4 id="scroll"><a href="#scroll" class="headerlink" title="scroll"></a>scroll</h4><p>整个滚动条，溢出内容可通过滚动条显示出来</p>
<h4 id="auto"><a href="#auto" class="headerlink" title="auto"></a>auto</h4><p>不溢出没事，溢出就给滚动条</p>
<h4 id="clip"><a href="#clip" class="headerlink" title="clip"></a>clip</h4><p>类似hidden，直接切掉不给显示</p>
<h2 id="尺寸与补白Dimension"><a href="#尺寸与补白Dimension" class="headerlink" title="尺寸与补白Dimension"></a>尺寸与补白Dimension</h2><h4 id="width"><a href="#width" class="headerlink" title="width"></a>width</h4><p>定义宽度，不能为负值，可用像素，百分比</p>
<h4 id="min-width"><a href="#min-width" class="headerlink" title="min-width"></a>min-width</h4><p>最小宽度</p>
<h4 id="max-width"><a href="#max-width" class="headerlink" title="max-width"></a>max-width</h4><p>最大宽度</p>
<p><strong>另有height，请以此类推</strong></p>
<h4 id="margin"><a href="#margin" class="headerlink" title="margin"></a>margin</h4><p>外边框，可以写上右下左，也可以写两个，表示上下、左右</p>
<p>只写垂直方向<strong>vertical-margin</strong> = <code>margin-top</code>,<code>margin-bottom</code></p>
<p>只写水平方向<strong>horizontal-margin</strong> = <code>margin-right</code>,<code>margin-left</code></p>
<h4 id="padding"><a href="#padding" class="headerlink" title="padding"></a>padding</h4><p>内边距，可以总写：上右下左</p>
<p>也可以分别指定<strong>padding-*</strong> = <code>padding-top</code>,<code>padding-right</code>,<code>padding-bottom</code>,<code>padding-left</code></p>
<h2 id="背景与边框Backgrounds-and-Borders"><a href="#背景与边框Backgrounds-and-Borders" class="headerlink" title="背景与边框Backgrounds and Borders"></a>背景与边框Backgrounds and Borders</h2><h3 id="border"><a href="#border" class="headerlink" title="border"></a>border</h3><p>如果四个方向都有的话就是这样写：border：线宽度 线样式 线颜色；</p>
<p>三个就作用于：上、左右、下</p>
<p>分开写的话大概长这样，分别给每个方向的样式进行定义 <strong>border-*</strong> = <code>border-top</code>,<code>border-right</code>,<code>border-bottom</code>,<code>border-left</code></p>
<h4 id="border-width"><a href="#border-width" class="headerlink" title="border-width"></a>border-width</h4><p>写一个就是四个方向的样式，写俩就是上下左右，写三个就是上、左右、下</p>
<p>这是分别指定的方式 <strong>border-*-width</strong> = <code>border-top-width</code>,<code>border-right-width</code>,<code>border-bottom-width</code>,<code>border-left-width</code></p>
<h4 id="border-style-border-color-请参考border-width"><a href="#border-style-border-color-请参考border-width" class="headerlink" title="border-style,border-color 请参考border-width"></a>border-style,border-color 请参考border-width</h4><h3 id="box-shadow"><a href="#box-shadow" class="headerlink" title="box-shadow"></a>box-shadow</h3><p>暂时不必接触</p>
<h3 id="border-radius"><a href="#border-radius" class="headerlink" title="border-radius"></a>border-radius</h3><p>圆角，定义半长轴，半短轴，不允许为负值，单位是像素或者百分比</p>
<p><strong>border-*-radius</strong> = <code>border-top-left-radius</code>,<code>border-top-right-radius</code>,<code>border-bottom-right-radius</code>,<code>border-bottom-left-radius</code></p>
<h3 id="border-image"><a href="#border-image" class="headerlink" title="border-image"></a>border-image</h3><p>border-image: url(skin/button.png) 2 9 fill repeat;</p>
<p>border-image-source border-image-slice [ / border-image-width | / border-image-width ? / border-image-outset ]? border-image-repeat</p>
<ul>
<li>border-image-source： 定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。 </li>
<li>border-image-slice： 定义元素边框背景图像从什么位置开始分割。 </li>
<li>border-image-width： 定义元素边框背景图像厚度。 </li>
<li>border-image-outset： 定义元素边框背景图像的外延尺寸。 </li>
<li>border-image-repeat： 定义元素边框背景图像的平铺方式。 </li>
</ul>
<h3 id="background，不熟练不建议集成写法"><a href="#background，不熟练不建议集成写法" class="headerlink" title="background，不熟练不建议集成写法"></a>background，不熟练不建议集成写法</h3><h3 id="background-color"><a href="#background-color" class="headerlink" title="background-color"></a>background-color</h3><p>定义背景颜色，有图片先显示图片</p>
<h3 id="background-image"><a href="#background-image" class="headerlink" title="background-image"></a>background-image</h3><p>定义背景图片，给定url();</p>
<h3 id="background-repeat"><a href="#background-repeat" class="headerlink" title="background-repeat"></a>background-repeat</h3><p>背景图片是否重复，也支持分方向重复</p>
<p>background-repeat：&lt; repeat-style &gt;</p>
<p> &lt; repeat-style &gt; = repeat-x | repeat-y | [repeat | no-repeat | space,空白填充残缺</p>
<h3 id="background-attachment，附件，依恋，附着"><a href="#background-attachment，附件，依恋，附着" class="headerlink" title="background-attachment，附件，依恋，附着"></a>background-attachment，附件，依恋，附着</h3><h4 id="fixed-1"><a href="#fixed-1" class="headerlink" title="fixed"></a>fixed</h4><p>相对于窗口固定</p>
<h4 id="scroll-1"><a href="#scroll-1" class="headerlink" title="scroll"></a>scroll</h4><p>相对于元素固定，元素内容动，但背景不滚动</p>
<h4 id="local"><a href="#local" class="headerlink" title="local"></a>local</h4><p>相对于内容固定，元素滚动，内容滚动</p>
<h3 id="background-position"><a href="#background-position" class="headerlink" title="background-position"></a>background-position</h3><p>背景图像的出现位置，默认left，top</p>
<p>接受1~4个参数，根据经验推算，单位是百分比或者像素。</p>
<h3 id="background-origin-起源，开端"><a href="#background-origin-起源，开端" class="headerlink" title="background-origin 起源，开端"></a>background-origin 起源，开端</h3><p>指的是背景图像计算background-position 时的参考远原点</p>
<p>属性值有</p>
<p>border-box，从border区域（含border）开始显示背景图像（背景图像起源于border区域）</p>
<p>padding-box （背景图像的显示从padding盒 区域开端）</p>
<p>content-box （背景的显示从内容盒区域开始）</p>
<h3 id="background-clip-修剪"><a href="#background-clip-修剪" class="headerlink" title="background-clip 修剪"></a>background-clip 修剪</h3><p>属性值同上，再加一个特殊的，</p>
<h4 id="text，类似遮罩效果，透过文字显示背景"><a href="#text，类似遮罩效果，透过文字显示背景" class="headerlink" title="text，类似遮罩效果，透过文字显示背景"></a>text，类似遮罩效果，透过文字显示背景</h4><h3 id="background-size"><a href="#background-size" class="headerlink" title="background-size"></a>background-size</h3><p>指定图像大小，像素，百分比，可能会发生拉伸</p>
<ul>
<li><p>auto： </p>
<p>背景图像的真实大小。 </p>
</li>
<li><p>cover： </p>
<p>将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 </p>
</li>
<li><p>contain： </p>
<p>将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。 </p>
</li>
</ul>
<h2 id="颜色color"><a href="#颜色color" class="headerlink" title="颜色color"></a>颜色color</h2><h3 id="color"><a href="#color" class="headerlink" title="color"></a>color</h3><p>可以使用：颜色英文单词、十六进制、rgb、rgba(a是透明度0-1)、等等</p>
<h3 id="opacity"><a href="#opacity" class="headerlink" title="opacity"></a>opacity</h3><p>不透明，不传导，</p>
<p>阈值0-1之间的浮点数</p>
<h2 id="字体font"><a href="#字体font" class="headerlink" title="字体font"></a>字体font</h2><h3 id="font：字体样式-大小写-粗细-拉伸-尺寸-行高-字体序列；"><a href="#font：字体样式-大小写-粗细-拉伸-尺寸-行高-字体序列；" class="headerlink" title="font：字体样式 大小写 粗细 拉伸 尺寸 行高 字体序列；"></a>font：字体样式 大小写 粗细 拉伸 尺寸 行高 字体序列；</h3><h3 id="font-style"><a href="#font-style" class="headerlink" title="font-style"></a>font-style</h3><h4 id="normal"><a href="#normal" class="headerlink" title="normal"></a>normal</h4><h4 id="italic"><a href="#italic" class="headerlink" title="italic"></a>italic</h4><h4 id="oblique，人为倾斜字体？"><a href="#oblique，人为倾斜字体？" class="headerlink" title="oblique，人为倾斜字体？"></a>oblique，人为倾斜字体？</h4><h3 id="font-variant-字母"><a href="#font-variant-字母" class="headerlink" title="font-variant 字母"></a>font-variant 字母</h3><h4 id="normal-1"><a href="#normal-1" class="headerlink" title="normal"></a>normal</h4><h4 id="small-caps"><a href="#small-caps" class="headerlink" title="small-caps"></a>small-caps</h4><p>小型的大写字母字体</p>
<h3 id="font-weight-粗细"><a href="#font-weight-粗细" class="headerlink" title="font-weight 粗细"></a>font-weight 粗细</h3><h4 id="normal、bold、bolder、lighter"><a href="#normal、bold、bolder、lighter" class="headerlink" title="normal、bold、bolder、lighter"></a>normal、bold、bolder、lighter</h4><p>也可以给定数值，400,700,900</p>
<h3 id="font-size-大小"><a href="#font-size-大小" class="headerlink" title="font-size 大小"></a>font-size 大小</h3><p>绝对大小用像素，相对大小用em</p>
<p>可用像素，百分比指定大小</p>
<h3 id="font-family-字体"><a href="#font-family-字体" class="headerlink" title="font-family 字体"></a>font-family 字体</h3><p>字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起</p>
<h2 id="文本Text"><a href="#文本Text" class="headerlink" title="文本Text"></a>文本Text</h2><h3 id="text-transform"><a href="#text-transform" class="headerlink" title="text-transform"></a>text-transform</h3><h4 id="none-不做转换"><a href="#none-不做转换" class="headerlink" title="none 不做转换"></a>none 不做转换</h4><h4 id="capitalize，首字母大写"><a href="#capitalize，首字母大写" class="headerlink" title="capitalize，首字母大写"></a>capitalize，首字母大写</h4><h4 id="uppercase-全单词大写"><a href="#uppercase-全单词大写" class="headerlink" title="uppercase 全单词大写"></a>uppercase 全单词大写</h4><h4 id="lowercase-全单词小写"><a href="#lowercase-全单词小写" class="headerlink" title="lowercase 全单词小写"></a>lowercase 全单词小写</h4><h3 id="white-space-白字符处理"><a href="#white-space-白字符处理" class="headerlink" title="white-space 白字符处理"></a>white-space 白字符处理</h3><h4 id="normal-默认处理，空白格多合一"><a href="#normal-默认处理，空白格多合一" class="headerlink" title="normal 默认处理，空白格多合一"></a>normal 默认处理，空白格多合一</h4><h4 id="pre-保留原格式，越界也不做处理"><a href="#pre-保留原格式，越界也不做处理" class="headerlink" title="pre 保留原格式，越界也不做处理"></a>pre 保留原格式，越界也不做处理</h4><h4 id="nowrap-强制同一行显示"><a href="#nowrap-强制同一行显示" class="headerlink" title="nowrap 强制同一行显示"></a>nowrap 强制同一行显示</h4><h4 id="pre-wrap-越界自动换行"><a href="#pre-wrap-越界自动换行" class="headerlink" title="pre-wrap 越界自动换行"></a>pre-wrap 越界自动换行</h4><h4 id="pre-line-保留输入时的换行"><a href="#pre-line-保留输入时的换行" class="headerlink" title="pre-line 保留输入时的换行"></a>pre-line 保留输入时的换行</h4><h3 id="word-wrap"><a href="#word-wrap" class="headerlink" title="word-wrap"></a>word-wrap</h3><h4 id="normal-允许内容溢出容器边界"><a href="#normal-允许内容溢出容器边界" class="headerlink" title="normal 允许内容溢出容器边界"></a>normal 允许内容溢出容器边界</h4><h4 id="break-word-需要断行就断行，尽量保持单词完整。"><a href="#break-word-需要断行就断行，尽量保持单词完整。" class="headerlink" title="break-word 需要断行就断行，尽量保持单词完整。"></a>break-word 需要断行就断行，尽量保持单词完整。</h4><h3 id="text-align"><a href="#text-align" class="headerlink" title="text-align"></a>text-align</h3><p>除了左中右外，还有</p>
<h4 id="justify，两端对齐"><a href="#justify，两端对齐" class="headerlink" title="justify，两端对齐"></a>justify，两端对齐</h4><h4 id="start，end-内容开始和结束边界"><a href="#start，end-内容开始和结束边界" class="headerlink" title="start，end 内容开始和结束边界"></a>start，end 内容开始和结束边界</h4><h3 id="word-spacing，单词间隔，像素，百分比"><a href="#word-spacing，单词间隔，像素，百分比" class="headerlink" title="word-spacing，单词间隔，像素，百分比"></a>word-spacing，单词间隔，像素，百分比</h3><h3 id="letter-spacing，字符间隔，像素"><a href="#letter-spacing，字符间隔，像素" class="headerlink" title="letter-spacing，字符间隔，像素"></a>letter-spacing，字符间隔，像素</h3><h3 id="text-indent，缩进"><a href="#text-indent，缩进" class="headerlink" title="text-indent，缩进"></a>text-indent，缩进</h3><p>一般使用2rem，首行缩进两个字符</p>
<p>也可以使用百分比。</p>
<h3 id="vertical-align-垂直对齐"><a href="#vertical-align-垂直对齐" class="headerlink" title="vertical-align 垂直对齐"></a>vertical-align 垂直对齐</h3><h4 id="baseline"><a href="#baseline" class="headerlink" title="baseline"></a>baseline</h4><p>将当前文本的基线与父级盒子的基线对齐</p>
<h4 id="text-top，text-bottom"><a href="#text-top，text-bottom" class="headerlink" title="text-top，text-bottom"></a>text-top，text-bottom</h4><p>将当前盒子的t/b与父级盒子的t/b对齐</p>
<h4 id="middle-把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐"><a href="#middle-把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐" class="headerlink" title="middle 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐"></a>middle 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐</h4><h4 id="top，bottom-将当前盒子与行盒子的t-b对齐"><a href="#top，bottom-将当前盒子与行盒子的t-b对齐" class="headerlink" title="top，bottom 将当前盒子与行盒子的t/b对齐"></a>top，bottom 将当前盒子与行盒子的t/b对齐</h4><h4 id="百分比（0-baseline），像素-0px-baseline"><a href="#百分比（0-baseline），像素-0px-baseline" class="headerlink" title="百分比（0%=baseline），像素(0px=baseline)"></a>百分比（0%=baseline），像素(0px=baseline)</h4><h3 id="line-height"><a href="#line-height" class="headerlink" title="line-height"></a>line-height</h3><p>行高，百分比，像素。</p>
<p>经常使用像素来实现垂直居中。</p>
<h2 id="文本装饰-text-decoration"><a href="#文本装饰-text-decoration" class="headerlink" title="文本装饰 text decoration"></a>文本装饰 text decoration</h2><h3 id="text-decoration：上线下线中线-实现虚线波浪线-线的颜色；"><a href="#text-decoration：上线下线中线-实现虚线波浪线-线的颜色；" class="headerlink" title="text-decoration：上线下线中线    实现虚线波浪线    线的颜色；"></a>text-decoration：上线下线中线    实现虚线波浪线    线的颜色；</h3><h3 id="text-decoration-line"><a href="#text-decoration-line" class="headerlink" title="text-decoration-line"></a>text-decoration-line</h3><h4 id="none，underline，overline，line-through，blink？？"><a href="#none，underline，overline，line-through，blink？？" class="headerlink" title="none，underline，overline，line-through，blink？？"></a>none，underline，overline，line-through，blink？？</h4><h3 id="text-decoration-color-线的颜色"><a href="#text-decoration-color-线的颜色" class="headerlink" title="text-decoration-color 线的颜色"></a>text-decoration-color 线的颜色</h3><h3 id="text-decoration-style：solid实线、double双线、dotted点线、dashed虚线、wavy波浪线"><a href="#text-decoration-style：solid实线、double双线、dotted点线、dashed虚线、wavy波浪线" class="headerlink" title="text-decoration-style：solid实线、double双线、dotted点线、dashed虚线、wavy波浪线"></a>text-decoration-style：solid实线、double双线、dotted点线、dashed虚线、wavy波浪线</h3><h3 id="text-shadow"><a href="#text-shadow" class="headerlink" title="text-shadow"></a>text-shadow</h3><p>三个值+颜色</p>
<p><strong>text-shadow</strong>：水平偏移量 垂直偏移量 模糊度 颜色</p>
<h2 id="书写模式Writing-Modes"><a href="#书写模式Writing-Modes" class="headerlink" title="书写模式Writing Modes"></a>书写模式Writing Modes</h2><h3 id="direction-设置文本流的方向"><a href="#direction-设置文本流的方向" class="headerlink" title="direction 设置文本流的方向"></a>direction 设置文本流的方向</h3><h4 id="ltr，rtl-左到右，右到左"><a href="#ltr，rtl-左到右，右到左" class="headerlink" title="ltr，rtl 左到右，右到左"></a>ltr，rtl 左到右，右到左</h4><h3 id="writing-mode"><a href="#writing-mode" class="headerlink" title="writing-mode"></a>writing-mode</h3><h4 id="horizontal-tb-水平方向从顶到底写"><a href="#horizontal-tb-水平方向从顶到底写" class="headerlink" title="horizontal-tb 水平方向从顶到底写"></a>horizontal-tb 水平方向从顶到底写</h4><h4 id="vertical-rl-垂直方向从右到左"><a href="#vertical-rl-垂直方向从右到左" class="headerlink" title="vertical-rl 垂直方向从右到左"></a>vertical-rl 垂直方向从右到左</h4><h4 id="vertical-rl-垂直方向从右到左-1"><a href="#vertical-rl-垂直方向从右到左-1" class="headerlink" title="vertical-rl 垂直方向从右到左"></a>vertical-rl 垂直方向从右到左</h4><h2 id="列表List"><a href="#列表List" class="headerlink" title="列表List"></a>列表List</h2><h3 id="list-style：type-position-image；"><a href="#list-style：type-position-image；" class="headerlink" title="list-style：type  position  image；"></a>list-style：type  position  image；</h3><h3 id="list-style-image：url"><a href="#list-style-image：url" class="headerlink" title="list-style-image：url();"></a>list-style-image：url();</h3><h3 id="list-style-position"><a href="#list-style-position" class="headerlink" title="list-style-position"></a>list-style-position</h3><h4 id="outside-列表项目标记放置在文本以外，且环绕文本不根据标记对齐"><a href="#outside-列表项目标记放置在文本以外，且环绕文本不根据标记对齐" class="headerlink" title="outside 列表项目标记放置在文本以外，且环绕文本不根据标记对齐"></a>outside 列表项目标记放置在文本以外，且环绕文本不根据标记对齐</h4><h4 id="inside-列表项目标记放置在文本以内，且环绕文本根据标记对齐"><a href="#inside-列表项目标记放置在文本以内，且环绕文本根据标记对齐" class="headerlink" title="inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐"></a>inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐</h4><h3 id="list-style-type"><a href="#list-style-type" class="headerlink" title="list-style-type"></a>list-style-type</h3><h4 id="disc-实心圆"><a href="#disc-实心圆" class="headerlink" title="disc 实心圆"></a>disc 实心圆</h4><h4 id="circle-空心圆"><a href="#circle-空心圆" class="headerlink" title="circle 空心圆"></a>circle 空心圆</h4><h4 id="square-实心方块"><a href="#square-实心方块" class="headerlink" title="square 实心方块"></a>square 实心方块</h4><h4 id="decimal-阿拉伯数字"><a href="#decimal-阿拉伯数字" class="headerlink" title="decimal 阿拉伯数字"></a>decimal 阿拉伯数字</h4><h2 id="表格table"><a href="#表格table" class="headerlink" title="表格table"></a>表格table</h2><h3 id="border-collapse"><a href="#border-collapse" class="headerlink" title="border-collapse"></a>border-collapse</h3><h4 id="separate：边框独立（分开）"><a href="#separate：边框独立（分开）" class="headerlink" title="separate：边框独立（分开）"></a>separate：边框独立（分开）</h4><h4 id="collapse：边框合并（折叠）"><a href="#collapse：边框合并（折叠）" class="headerlink" title="collapse：边框合并（折叠）"></a>collapse：边框合并（折叠）</h4><h3 id="border-spacing：横向-纵向；单位px"><a href="#border-spacing：横向-纵向；单位px" class="headerlink" title="border-spacing：横向 纵向；单位px"></a>border-spacing：横向 纵向；单位px</h3><h3 id="empty-cells"><a href="#empty-cells" class="headerlink" title="empty-cells"></a>empty-cells</h3><h4 id="hide：当内容为空时隐藏单元格框线"><a href="#hide：当内容为空时隐藏单元格框线" class="headerlink" title="hide：当内容为空时隐藏单元格框线"></a>hide：当内容为空时隐藏单元格框线</h4><h2 id="跳过了内容和用户界面"><a href="#跳过了内容和用户界面" class="headerlink" title="跳过了内容和用户界面"></a>跳过了内容和用户界面</h2><h2 id="多列multi-column，应该就是和并列什么的"><a href="#多列multi-column，应该就是和并列什么的" class="headerlink" title="多列multi-column，应该就是和并列什么的"></a>多列multi-column，应该就是和并列什么的</h2><h3 id="columns：列宽px-列数；"><a href="#columns：列宽px-列数；" class="headerlink" title="columns：列宽px 列数；"></a>columns：列宽px 列数；</h3><p>可指定一个，其余会根据内容动态调整</p>
<h3 id="column-width，column-count，定义列宽列数"><a href="#column-width，column-count，定义列宽列数" class="headerlink" title="column-width，column-count，定义列宽列数"></a>column-width，column-count，定义列宽列数</h3><h3 id="column-gap-列与列的间隔，默认同font-size"><a href="#column-gap-列与列的间隔，默认同font-size" class="headerlink" title="column-gap 列与列的间隔，默认同font-size"></a>column-gap 列与列的间隔，默认同font-size</h3><h3 id="column-rule：厚度-样式-颜色；"><a href="#column-rule：厚度-样式-颜色；" class="headerlink" title="column-rule：厚度 样式 颜色；"></a>column-rule：厚度 样式 颜色；</h3><h3 id="column-rule-width，style，color"><a href="#column-rule-width，style，color" class="headerlink" title="column-rule-width，style，color"></a>column-rule-width，style，color</h3><h3 id="column-span-none，all"><a href="#column-span-none，all" class="headerlink" title="column-span none，all"></a>column-span none，all</h3><p>设置对象是否横跨所有列</p>
<h3 id="column-fill-auto，balance"><a href="#column-fill-auto，balance" class="headerlink" title="column-fill auto，balance"></a>column-fill auto，balance</h3><p>列的高度是否自适应，统一以最高为准。</p>
<h2 id="伸缩盒（Flexible-Box）"><a href="#伸缩盒（Flexible-Box）" class="headerlink" title="伸缩盒（Flexible Box）"></a>伸缩盒（Flexible Box）</h2><h3 id="flex：grow-shrink-basis；"><a href="#flex：grow-shrink-basis；" class="headerlink" title="flex：grow shrink basis；"></a>flex：grow shrink basis；</h3><p>扩展 收缩 伸缩基准值，</p>
<h4 id="grow"><a href="#grow" class="headerlink" title="grow"></a>grow</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul class&#x3D;&quot;flex&quot;&gt;</span><br><span class="line">    &lt;li&gt;a&lt;&#x2F;li&gt;</span><br><span class="line">    &lt;li&gt;b&lt;&#x2F;li&gt;</span><br><span class="line">    &lt;li&gt;c&lt;&#x2F;li&gt;</span><br><span class="line">&lt;&#x2F;ul&gt;</span><br><span class="line"></span><br><span class="line">.flex&#123;display:flex;width:600px;margin:0;padding:0;list-style:none;&#125;</span><br><span class="line">.flex li:nth-child(1)&#123;width:200px;&#125;</span><br><span class="line">.flex li:nth-child(2)&#123;flex-grow:1;width:50px;&#125;</span><br><span class="line">.flex li:nth-child(3)&#123;flex-grow:3;width:50px;&#125;</span><br></pre></td></tr></table></figure>

<p>flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。</p>
<p>本例中b,c两项都显式的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，即1:3</p>
<p>flex容器的剩余空间长度为：600-200-50-50=300px，所以最终a,b,c的长度分别为：</p>
<p>a: 50+(300/4)=200px</p>
<p>b: 50+(300/4*1)=125px</p>
<p>a: 50+(300/4*3)=275px</p>
<h3 id="flex-shrink-收缩"><a href="#flex-shrink-收缩" class="headerlink" title="flex-shrink 收缩"></a>flex-shrink 收缩</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul class&#x3D;&quot;flex&quot;&gt;</span><br><span class="line">    &lt;li&gt;a&lt;&#x2F;li&gt;</span><br><span class="line">    &lt;li&gt;b&lt;&#x2F;li&gt;</span><br><span class="line">    &lt;li&gt;c&lt;&#x2F;li&gt;</span><br><span class="line">&lt;&#x2F;ul&gt;</span><br><span class="line"></span><br><span class="line">.flex&#123;display:flex;width:400px;margin:0;padding:0;list-style:none;&#125;</span><br><span class="line">.flex li&#123;width:200px;&#125;</span><br><span class="line">.flex li:nth-child(3)&#123;flex-shrink:3;&#125;</span><br></pre></td></tr></table></figure>

<p>计算方法参考flex-grow</p>
<h3 id="flex-basis"><a href="#flex-basis" class="headerlink" title="flex-basis"></a>flex-basis</h3><h4 id="length：用长度值来定义宽度。不允许负值"><a href="#length：用长度值来定义宽度。不允许负值" class="headerlink" title="length：用长度值来定义宽度。不允许负值"></a>length：用长度值来定义宽度。不允许负值</h4><h4 id="percentage：用百分比来定义宽度。不允许负值"><a href="#percentage：用百分比来定义宽度。不允许负值" class="headerlink" title="percentage：用百分比来定义宽度。不允许负值"></a>percentage：用百分比来定义宽度。不允许负值</h4><h4 id="auto：无特定宽度值，取决于其它属性值"><a href="#auto：无特定宽度值，取决于其它属性值" class="headerlink" title="auto：无特定宽度值，取决于其它属性值"></a>auto：无特定宽度值，取决于其它属性值</h4><h4 id="content：基于内容自动计算宽度"><a href="#content：基于内容自动计算宽度" class="headerlink" title="content：基于内容自动计算宽度"></a>content：基于内容自动计算宽度</h4><h3 id="flex-flow：direction-wrap；"><a href="#flex-flow：direction-wrap；" class="headerlink" title="flex-flow：direction wrap；"></a>flex-flow：direction wrap；</h3><p>flex-direction：row | row-reverse | column | column-reverse</p>
<p>flex-wrap：nowrap | wrap | wrap-reverse</p>
<h3 id="align-content"><a href="#align-content" class="headerlink" title="align-content"></a>align-content</h3><p>align-content：flex-start | flex-end | center | space-between | space-around | stretch</p>
<p>这个大概就是，将容器内的元素排列，不是对齐，可以理解为从哪个位置开始排列容器内的东西。</p>
<h3 id="align-items"><a href="#align-items" class="headerlink" title="align-items"></a>align-items</h3><p>align-items：flex-start | flex-end | center | baseline | stretch</p>
<p>这个应该就是将容器内的元素依据某个规则进行对齐</p>
<p>边线靠左靠上，边线靠左考下，靠左垂直居中，靠左对齐基线，靠左上下拉伸</p>
<h3 id="align-self"><a href="#align-self" class="headerlink" title="align-self"></a>align-self</h3><p>align-self：auto | flex-start | flex-end | center | baseline | stretch</p>
<h3 id="justify-content"><a href="#justify-content" class="headerlink" title="justify-content"></a>justify-content</h3><p>justify-content：flex-start | flex-end | center | space-between | space-around</p>
<p><strong>center</strong>： 弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。 </p>
<h2 id="Transform-2D转换"><a href="#Transform-2D转换" class="headerlink" title="Transform 2D转换"></a>Transform 2D转换</h2><h3 id="translate"><a href="#translate" class="headerlink" title="translate"></a>translate</h3><p>translate(x-px,y-px)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。</p>
<h3 id="rotate"><a href="#rotate" class="headerlink" title="rotate"></a>rotate</h3><p>rotate(n-deg)方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。</p>
<h3 id="scale"><a href="#scale" class="headerlink" title="scale"></a>scale</h3><p>缩放比例，先宽后高，scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数</p>
<h3 id="skew-倾斜"><a href="#skew-倾斜" class="headerlink" title="skew 倾斜"></a>skew 倾斜</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">transform:skew(&lt;angle&gt; [,&lt;angle&gt;]);</span><br></pre></td></tr></table></figure>

<p>包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。</p>
<ul>
<li>skewX(n-deg);表示只在X轴(水平方向)倾斜。</li>
<li>skewY(n-deg);表示只在Y轴(垂直方向)倾斜。</li>
</ul>
<h3 id="matrix-矩阵"><a href="#matrix-矩阵" class="headerlink" title="matrix 矩阵"></a>matrix 矩阵</h3><p>matrix()方法和2D变换方法合并成一个。</p>
<p>matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">div</span><br><span class="line">&#123;</span><br><span class="line">transform:matrix(0.866,0.5,-0.5,0.866,0,0);</span><br><span class="line">-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */</span><br><span class="line">-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="Transform-3D转换"><a href="#Transform-3D转换" class="headerlink" title="Transform 3D转换"></a>Transform 3D转换</h2><h3 id="rotateX"><a href="#rotateX" class="headerlink" title="rotateX"></a>rotateX</h3><p>rotateX(n-deg)方法，围绕其在一个给定度数X轴旋转的元素。</p>
<h3 id="rotateY"><a href="#rotateY" class="headerlink" title="rotateY"></a>rotateY</h3><p>rotateY(n-deg)方法，围绕其在一个给定度数Y轴旋转的元素。</p>
<h2 id="CSS3过度"><a href="#CSS3过度" class="headerlink" title="CSS3过度"></a>CSS3过度</h2><h3 id="单项改变"><a href="#单项改变" class="headerlink" title="单项改变"></a>单项改变</h3><p>写法</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span> </span><br><span class="line">div</span><br><span class="line">&#123;</span><br><span class="line"><span class="css">	<span class="selector-tag">width</span><span class="selector-pseudo">:100px</span>;</span></span><br><span class="line"><span class="css">	<span class="selector-tag">height</span><span class="selector-pseudo">:100px</span>;</span></span><br><span class="line"><span class="css">	<span class="selector-tag">background</span><span class="selector-pseudo">:red</span>;</span></span><br><span class="line"><span class="css">	<span class="selector-tag">transition</span><span class="selector-pseudo">:width</span> 2<span class="selector-tag">s</span>;</span></span><br><span class="line"><span class="css">	<span class="selector-tag">-webkit-transition</span><span class="selector-pseudo">:width</span> 2<span class="selector-tag">s</span>; <span class="comment">/* Safari */</span></span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="css"><span class="selector-tag">div</span><span class="selector-pseudo">:hover</span></span></span><br><span class="line">&#123;</span><br><span class="line"><span class="css">	<span class="selector-tag">width</span><span class="selector-pseudo">:300px</span>;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="多项改变"><a href="#多项改变" class="headerlink" title="多项改变"></a>多项改变</h3><p>写法实例</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span> </span><br><span class="line">div &#123;</span><br><span class="line">    width: 100px;</span><br><span class="line">    height: 100px;</span><br><span class="line">    background: red;</span><br><span class="line"><span class="css">    <span class="selector-tag">-webkit-transition</span>: <span class="selector-tag">width</span> 2<span class="selector-tag">s</span>, <span class="selector-tag">height</span> 2<span class="selector-tag">s</span>, <span class="selector-tag">-webkit-transform</span> 2<span class="selector-tag">s</span>; <span class="comment">/* For Safari 3.1 to 6.0 */</span></span></span><br><span class="line">    transition: width 2s, height 2s, transform 2s;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="css"><span class="selector-tag">div</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line">    width: 200px;</span><br><span class="line">    height: 200px;</span><br><span class="line"><span class="css">    <span class="selector-tag">-webkit-transform</span>: <span class="selector-tag">rotate</span>(180<span class="selector-tag">deg</span>); <span class="comment">/* Chrome, Safari, Opera */</span></span></span><br><span class="line">    transform: rotate(180deg);</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p> transition: width 2s, height 2s, transform 2s;</p>
<p>过渡：宽度2s， 高度2s， 变换2s</p>
<p>原来块的内容用来定义属性和等待时间，称为初始化块</p>
<p>伪类用来定义目标效果</p>
<p><strong>两处都要做适配</strong></p>
<h3 id="transition-delay-触发等待时间"><a href="#transition-delay-触发等待时间" class="headerlink" title="transition-delay 触发等待时间"></a>transition-delay 触发等待时间</h3><p>transition-delay: 2s;</p>
<p>事件做到了，但是需要延迟一下再进行变换。</p>
<p>需要写在初始化样式块中。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt; </span><br><span class="line">div</span><br><span class="line">&#123;</span><br><span class="line">	width:100px;</span><br><span class="line">	height:100px;</span><br><span class="line">	background:red;</span><br><span class="line">	transition-property:width;</span><br><span class="line">	transition-duration:5s;</span><br><span class="line">	transition-delay:2s;</span><br><span class="line"></span><br><span class="line">&#x2F;* Safari *&#x2F;</span><br><span class="line">-webkit-transition-property:width; </span><br><span class="line">-webkit-transition-duration:5s;</span><br><span class="line">-webkit-transition-delay:2s;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">div:hover</span><br><span class="line">&#123;</span><br><span class="line">	width:300px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;style&gt;</span><br></pre></td></tr></table></figure>

<h2 id="动画章节-animation"><a href="#动画章节-animation" class="headerlink" title="动画章节 animation"></a>动画章节 animation</h2><p>先定义动画，再从元素中调用，这样理解起来就十分清晰了！</p>
<p>可以设置A to B的模式，也可以按照百分比进度的模式。</p>
<p><strong>让盒子居于中央的方法：display：flex；justify-content：center；align-items：center；</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">@keyframes animation_name&#123;</span><br><span class="line">	from&#123;</span><br><span class="line"></span><br><span class="line">		background:red;</span><br><span class="line">	&#125;</span><br><span class="line">	to&#123;</span><br><span class="line">	    backgroung:blue;</span><br><span class="line">	&#125;</span><br><span class="line">也可以写百分比多少来实现，花括号内写你想要的动作。就算百分比颠倒也没关系。</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="animation：属性复合写法，也可以拆开写，单独设置"><a href="#animation：属性复合写法，也可以拆开写，单独设置" class="headerlink" title="animation：属性复合写法，也可以拆开写，单独设置"></a>animation：属性复合写法，也可以拆开写，单独设置</h3><h4 id="animation-name：检索或设置对象所应用的动画名称"><a href="#animation-name：检索或设置对象所应用的动画名称" class="headerlink" title="animation-name：检索或设置对象所应用的动画名称"></a>animation-name：检索或设置对象所应用的动画名称</h4><p>直接写要应用与这个元素的动画名称，而这个名称是通过@keyframes 定义的</p>
<h4 id="animation-duration：检索或设置对象动画的持续时间"><a href="#animation-duration：检索或设置对象动画的持续时间" class="headerlink" title="animation-duration：检索或设置对象动画的持续时间"></a>animation-duration：检索或设置对象动画的持续时间</h4><p>duration：持续时间，持续，音延</p>
<p>指定对象动画的持续时间</p>
<h4 id="animation-timing-function：检索或设置对象动画的过渡类型"><a href="#animation-timing-function：检索或设置对象动画的过渡类型" class="headerlink" title="animation-timing-function：检索或设置对象动画的过渡类型"></a>animation-timing-function：检索或设置对象动画的过渡类型</h4><p>timing：定时，调速，时间选择。大概就是给元素的运动时长规定时间，在时间内按照什么样的速率进行运动。</p>
<p>function：动词有运动的意思</p>
<h5 id="属性有："><a href="#属性有：" class="headerlink" title="属性有："></a>属性有：</h5><p><strong>linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)</strong><br><strong>ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)</strong><br>ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)<br>ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)<br>ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)<br>step-start：等同于 steps(1, start)<br>step-end：等同于 steps(1, end)<br>steps(&lt; integer&gt;[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。<br>cubic-bezier(&lt; number&gt;, &lt; number&gt;, &lt; number&gt;, &lt; number&gt;)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内</p>
<h4 id="animation-delay：检索或设置对象动画延迟的时间"><a href="#animation-delay：检索或设置对象动画延迟的时间" class="headerlink" title="animation-delay：检索或设置对象动画延迟的时间"></a>animation-delay：检索或设置对象动画延迟的时间</h4><p>给的变量的单位是秒，指定对象动画的延迟时间。</p>
<p>注意写的时候要带着s或者ms，若综合使用，需要与其他属性用逗号分开。</p>
<h4 id="animation-iteration-count：检索或设置对象动画的循环次数"><a href="#animation-iteration-count：检索或设置对象动画的循环次数" class="headerlink" title="animation-iteration-count：检索或设置对象动画的循环次数"></a>animation-iteration-count：检索或设置对象动画的循环次数</h4><p>iteration：n，迭代，反复，重复</p>
<p>count：计数</p>
<h5 id="属性有：-1"><a href="#属性有：-1" class="headerlink" title="属性有："></a>属性有：</h5><p>infinite：无限的，无限循环。</p>
<p>n：指定具体循环次数。</p>
<h4 id="animation-direction：检索或设置对象动画在循环中是否反向运动"><a href="#animation-direction：检索或设置对象动画在循环中是否反向运动" class="headerlink" title="animation-direction：检索或设置对象动画在循环中是否反向运动"></a>animation-direction：检索或设置对象动画在循环中是否反向运动</h4><h5 id="属性有：-2"><a href="#属性有：-2" class="headerlink" title="属性有："></a>属性有：</h5><p>normal：正常方向</p>
<p>reverse：反方向运行</p>
<p>alternate：先正后反，交替运行</p>
<p>alternate-reverse：先反再正，交替运行</p>
<h4 id="animation-fill-mode：检索或设置对象动画时间之外的状态"><a href="#animation-fill-mode：检索或设置对象动画时间之外的状态" class="headerlink" title="animation-fill-mode：检索或设置对象动画时间之外的状态"></a>animation-fill-mode：检索或设置对象动画时间之外的状态</h4><p>none：默认值。不设置对象动画之外的状态<br><strong>forwards：设置对象状态为动画结束时的状态</strong><br><strong>backwards：设置对象状态为动画开始时的状态</strong><br>both：设置对象状态为动画结束或开始的状态</p>
<h4 id="状态属性，不写在综合里：animation-play-state：running、paused"><a href="#状态属性，不写在综合里：animation-play-state：running、paused" class="headerlink" title="状态属性，不写在综合里：animation-play-state：running、paused"></a>状态属性，不写在综合里：animation-play-state：running、paused</h4>
        </div>

        <blockquote class="post-copyright">
    
    <div class="content">
        
<span class="post-time">
    Last updated: <time datetime="2020-09-26T08:33:50.475Z" itemprop="dateUpdated">2020-09-26 16:33:50</time>
</span><br>


        
        这里可以写作者留言，标签和 hexo 中所有变量及辅助函数等均可调用，示例：<a href="/blog/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/" target="_blank" rel="external">https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/</a>
        
    </div>
    
    <footer>
        <a href="https://gitee.com/songbug/blog.git">
            <img src="/blog/img/avatar.jpg" alt="Song Wani">
            Song Wani
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            

            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/&title=《CSS3的学习》 — SongKaBaKa&pic=https://gitee.com/songbug/blog.git/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/&title=《CSS3的学习》 — SongKaBaKa&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《CSS3的学习》 — SongKaBaKa&url=https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/&via=https://gitee.com/songbug/blog.git" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/blog/2020/09/26/CSS_Animation%E8%BF%9B%E9%98%B6/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">CSS_Animation进阶</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/blog/2020/09/22/%E9%98%B6%E6%AE%B5%E5%A4%8D%E4%B9%A0/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">阶段复习</h4>
      </a>
    </div>
  
</nav>



    




















</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        谢谢大爷~
        <i class="icon icon-quote-right"></i>
    </h3>
    <div class="reward-content">
        
        <div class="reward-code">
            <img id="rewardCode" src="/blog/img/wechat.jpg" alt="打赏二维码">
        </div>
        
        <label class="reward-toggle">
            <input id="rewardToggle" type="checkbox" class="reward-toggle-check"
                data-wechat="/blog/img/wechat.jpg" data-alipay="/blog/img/alipay.jpg">
            <div class="reward-toggle-ctrol">
                <span class="reward-toggle-item wechat">微信</span>
                <span class="reward-toggle-label"></span>
                <span class="reward-toggle-item alipay">支付宝</span>
            </div>
        </label>
        
    </div>
</div>



</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
            <span>This blog is licensed under a <a rel="license noopener" href="https://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution 4.0 International License</a>.</span>
        </p>
    </div>
    <div class="bottom">
        <p><span>Song Wani &copy; 2019 - 2021</span>
            <span>
                
                Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a>
            </span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/&title=《CSS3的学习》 — SongKaBaKa&pic=https://gitee.com/songbug/blog.git/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/&title=《CSS3的学习》 — SongKaBaKa&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《CSS3的学习》 — SongKaBaKa&url=https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/&via=https://gitee.com/songbug/blog.git" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="//api.qrserver.com/v1/create-qr-code/?data=https://gitee.com/songbug/blog.git/2020/09/23/CSS3%E7%9A%84%E5%AD%A6%E4%B9%A0/" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/blog/', SHARE: true, REWARD: true };


</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>






<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '死鬼去哪里了！';
            clearTimeout(titleTime);
        } else {
            document.title = '(つェ⊂)咦!又好了!';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



</body>
</html>
